<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src = 'jquery/jquery-1.12.4.min.js'></script>
    <title>ALL</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .over{
            background-color: #ff6d66;
            font-size: 22px;
        }
    </style>
    <script>
        var menu = [
            {id:'1',pid:'0',name:'HTML'},
            {id:'2',pid:'1',name:'html',url:'html/htmla.html'},
            {id:'3',pid:'1',name:'frameset',url:'html/frameset.html'},
            {id:'4',pid:'1',name:'frame',url:'html/frame.html'},
            {id:'5',pid:'1',name:'iframe',url:'html/iframe.html'},
            {id:'6',pid:'1',name:'br',url:'html/br.html'},
            {id:'7',pid:'1',name:'hr',url:'html/hr2.html'},
            {id:'8',pid:'1',name:'pre',url:'html/pre.html'},
            {id:'9',pid:'1',name:'img',url:'html/img.html'},
            {id:'10',pid:'1',name:'a',url:'html/a.html'},
            {id:'11',pid:'1',name:'h3',url:'html/h1-h6bq.html'},
            {id:'12',pid:'1',name:'p',url:'html/pbq.html'},
            {id:'13',pid:'1',name:'span',url:'html/spanbq.html'},
            {id:'14',pid:'1',name:'div',url:'html/div.html'},
            {id:'15',pid:'1',name:'ul',url:'html/lbbq.html'},
            {id:'16',pid:'1',name:'table',url:'html/bg.html'},
            {id:'17',pid:'1',name:'form',url:'html/bd.html'},
            {id:'18',pid:'1',name:'样式标签',url:'html/ysbq.html'},
            {id:'19',pid:'1',name:'热点地图',url:'html/rddt.html'},
            {id:'20',pid:'0',name:'CSS'},
            {id:'21',pid:'20',name:'样式表',url:'html/YSB.html'},
            {id:'22',pid:'20',name:'全局选择器',url:'html/qjxzq.html'},
            {id:'23',pid:'20',name:'标签选择器',url:'html/bqxzq.html'},
            {id:'24',pid:'20',name:'类选择器',url:'html/lxzq.html'},
            {id:'25',pid:'20',name:'ID选择器',url:'html/idxzq.html'},
            {id:'26',pid:'20',name:'分组选择器',url:'html/fzxzq.html'},
            {id:'27',pid:'20',name:'后代选择器',url:'html/hdxzq.html'},
            {id:'28',pid:'20',name:'基本样式',url:'html/sxxzq.html'},
            {id:'29',pid:'20',name:'伪类样式',url:'html/wlys.html'},
            {id:'30',pid:'20',name:'背景',url:'html/bj.html'},
            {id:'31',pid:'0',name:'JAVASCRIPT'},
            {id:'32',pid:'31',name:'JS概念 组成部分'},
            {id:'33',pid:'31',name:'声明变量及变量类型',url:'jshomework/var.html'},
            {id:'34',pid:'31',name:'声明自定义对象',url:'jshomework/varff.html'},
            {id:'35',pid:'31',name:'逻辑语法'},
            {id:'36',pid:'35',name:'if',url:'jshomework/if.html'},
            {id:'37',pid:'35',name:'if else',url:'jshomework/if else.html'},
            {id:'38',pid:'35',name:'if else if',url:'jshomework/if else if.html'},
            {id:'39',pid:'35',name:'for',url:'jshomework/for.html'},
            {id:'40',pid:'35',name:'while',url:'jshomework/while.html'},
            {id:'41',pid:'35',name:'do whlie',url:'jshomework/do whlie.html'},
            {id:'42',pid:'35',name:'switch',url:'jshomework/switch.html'},
            {id:'43',pid:'31',name:'内置对象'},
            {id:'44',pid:'43',name:'window'},
            {id:'45',pid:'44',name:'alert',url:'jshomework/alert.html'},
            {id:'46',pid:'44',name:'prompt',url:'jshomework/prompt.html'},
            {id:'47',pid:'44',name:'confirm',url:'jshomework/confirm.html'},
            {id:'48',pid:'44',name:'open',url:'jshomework/open.html'},
            {id:'49',pid:'44',name:'close',url:'jshomework/close.html'},
            {id:'50',pid:'44',name:'setTimeout',url:'jshomework/setTimeout.html'},
            {id:'51',pid:'44',name:'setInterval',url:'jshomework/setInterval.html'},
            {id:'52',pid:'43',name:'document',url:'jshomework/document.html'},
            {id:'53',pid:'43',name:'history'},
            {id:'54',pid:'53',name:'forward',url:'jshomework/forward.html'},
            {id:'55',pid:'53',name:'back',url:'jshomework/back.html'},
            {id:'56',pid:'53',name:'go',url:'jshomework/go.html'},
            {id:'57',pid:'43',name:'Data'},
            {id:'',pid:'57',name:'getFullyear',url:'jshomework/getFullyear.html'},
            {id:'',pid:'57',name:'setFullyear',url:'jshomework/setFullyear.html'},
            {id:'',pid:'57',name:'getMonth',url:'jshomework/getMonth.html'},
            {id:'',pid:'57',name:'setMonth',url:'jshomework/setMonth.html'},
            {id:'',pid:'57',name:'getdate',url:'jshomework/getdate.html'},
            {id:'',pid:'57',name:'setdate',url:'jshomework/setdate.html'},
            {id:'',pid:'57',name:'getday',url:'jshomework/getday.html'},
            {id:'',pid:'57',name:'getHours',url:'jshomework/gethour.html'},
            {id:'',pid:'57',name:'setHours',url:'jshomework/setHours.html'},
            {id:'',pid:'57',name:'getminute',url:'jshomework/getMonth.html'},
            {id:'',pid:'57',name:'setMonth',url:'jshomework/setMonth.html'},
            {id:'',pid:'57',name:'getSecond',url:'jshomework/getdate.html'},
            {id:'',pid:'57',name:'setSeconds',url:'jshomework/setdate.html'},
            {id:'',pid:'57',name:'getMilliseconds',url:'jshomework/getday.html'},
            {id:'',pid:'57',name:'setMilliseconds',url:''},
            {id:'',pid:'43',name:'location'},
            {id:'',pid:'43',name:'screen'},
            {id:'',pid:'43',name:'math'},
            {id:'',pid:'43',name:'string'},
            {id:'',pid:'43',name:'array'},
            {id:'',pid:'43',name:'cookie',url:'jshomework/cookie.html'},
            {id:'',pid:'43',name:''},
            {id:'',pid:'31',name:'事件'},
            {id:'',pid:'31',name:'JS作业'},
            {id:'',pid:'0',name:'JQUERY'},
            {id:'',pid:'0',name:'HOMEWORK'},
            {id:'',pid:'0',name:'EXAM'}
        ];

        jQuery(function ($) {

            var top = $('#_top'),left = $('#_left'),right = $('#_right');

            $(window).resize(function () {
                var _width = document.documentElement.clientWidth;
                var _height = document.documentElement.clientHeight;
                left.width(250).height(_height - top.outerHeight());
                right.width(_width - left.outerWidth()).height(left.height());

            });
            $(window).resize();

            var _ = [];
            $.each(menu,function (i,o) {
                _.push('<p id = "');
                _.push(o.id);
                _.push('" pid = "');
                _.push(o.pid);
                _.push('"');
                if(o.url){
                    _.push(' url = "');
                    _.push(o.url);
                    _.push('"');
                }

                _.push('style = "display:none;cursor:pointer" margin = "15px 0 " title = "');
                _.push(o.name);
                _.push('">');
                _.push(o.name);
                _.push('</p>');
            });

            //菜单添加到left区域
            var me = $('#_left').css({padding:0}).append(_.join(''));

            //菜单装载页面功能
            $('p[url]',me).click(function () {$('#_right').load($(this).attr('url'));});
            //展示第一层级的菜单
            $('p[pid = 0]',me).show();

            //菜单的鼠标样式
            var menus = $('p',me);
            menus.hover(function () {$(this).addClass('over');}, function () {$(this).removeClass('over')});

            //菜单的收展功能
            menus.click(function () {
               var id = $(this).attr('id');
               var chlid = $('p[pid="' + id +'"]');
               var _textIndent = parseInt($(this).css('textIndent'));
               chlid.css({textIndent:(_textIndent + 20) + 'px'}).toggle();
            });

            $("p[url]").click(function () {
                $('#_right').load($(this).attr('url'));
            });
        });
    </script>
</head>
<body>
<div id="_top" style="height: 100px;border-bottom: 1px solid #c8c8c8"></div>
<div id="_left" style="overflow:auto;float: left;width: 150px;border-right: 1px solid #c8c8c8"></div>
<div id="_right" style="overflow:auto;float: left"></div>
</body>
</html>